<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script>
	{
		// 对象解构赋值基本语法,顺序不用一一对应
		// let {c,b,a} = {a:1,b:2,c:3};
		// console.log(a,b,c);// 1 2 3
		//
	}
	// {
	// 	//= 右侧可以是一个常或变量
	// 	let obj =  {a:1,b:2,c:3,};
	// 	let {a,b,c } = obj;
	// 	console.log(a,b,c);// 1 2 3
	//
	// 	const info = {
	// 		userName:"zhangsan",
	// 		age:12
	// 	}
	// 	let {userName,age} = info;
	// 	console.log(userName,age);// zhangsan 12
	// }
	
	
	{
		// 嵌套对象解构
		// const obj = {
		// 	a:1,
		// 	b:2,
		// 	info:{
		// 		userName:"zhangsan",
		// 		age:12
		// 	}
		// }
		// const {a,b,info:{userName,age}} = obj;
		// console.log(a,b,userName,age);
	}
	{
		//可忽略解构源的属性
		// const {a,c} = {a:1,b:2,c:3,d:4}
		// console.log(a,c);
	}
	{
		// 剩余运算符
		// // const {a,b,...my} = {a:1,b:2,c:3,d:4,e:5};
		// // console.log(a,b,my);// 1 2 {c:3,d:4,e:5}
		//
		// // 以下不允许：
		// const {...my,a,b} = {a:1,b:2,c:3,d:4,e:5};
		// console.log(a,b,my);// 1 2 {c:3,d:4,e:5}
	}
	{
		// 不完全解构：变量名称在对象中不存在
		// const {c,e,my}= {a:1,b:2,c:3};
		// console.log(c,e,my);// 3 undefined undefined
	}
	{
		// 解构默认值(常用)
		// const {a,b,c,d=100} = {a:1,b:2,c:3};
		// console.log(a,b,c,d);// 1 2 3 100
	}
	{
		//*  为非同名局部变量赋值 ，可避免命名冲突
		// 如果希望使用不同命名的局部变量来存储对象属性的值，
		// `ES6`中的一个扩展语法可以满足需求，这个语法与完整的对象字面量属性初始化程序的很像。
		
		// let userName = "zhangsan";
		// let obj = {
		// 	userName:"lisi",
		// 	age:12
		// }
		// let {userName:myUserName,age} = obj;
		// console.log(userName,myUserName,age);// zhangsan lisi 12
		
	}
	{
		// 函数传参数
		// function fn({a, b, c = 10, d = 30}) {
		// 	console.log(a, b, c, d);
		// 	return {
		// 		userName: "lisi",
		// 		age: 12
		// 	}
		// }
		//
		// const {userName, age} = fn({a: 1, b: 2});
		// console.log(userName,age);// lisi 12
	}

</script>
</html>